<template>
	<view>
		<view class="order-menu">
			<view class="layout">
				<view class="order-menu-item" v-for="(row,index) in orderType" :key="index">
					{{row.label}}
				</view>
			</view>
		</view>
		
		<view class="order-box">
			<view class="order-box-item" v-for="(order,index) in orderList" :key="index" @click="onOrderDetailButton(order)">
				<view class="order-box-item-header">
					<view class="layout">
						<view>{{order.orderCode}}</view>
						<view>{{order.orderStatus.label}}</view>
					</view>
				</view>
				<view class="order-box-item-shopping">
					<view class="order-box-item-shopping-list">
						<view class="layout-left">
							<view class="order-box-item-shopping-list-item" v-for="(shopping,index) in order.shopping" :key="index">
								<view class="layout">
									<view class="order-box-item-shopping-list-icon">
										<image :src="shopping.prodLogo"></image>
									</view>
									<view v-if="order.shopping.length < 2" class="order-box-item-shopping-list-text">
										{{shopping.prodName}}
									</view>							
								</view>					
							</view>
							
						</view>
					</view>
					<view class="order-box-item-shopping-volume">
						<view>￥565.99</view>
						<view>共1件</view>
					</view>
				</view>
				<view class="order-box-item-button">
					<view class="layout-right">
						<view class="order-box-item-button-item">再来一单</view>
						<view class="order-box-item-button-item">去支付</view>
						<view class="order-box-item-button-item">开发票</view>
						<view class="order-box-item-button-item">删除订单</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderType:[
					{
						label:"所有",
						value:0
					},
					{
						label:"预定",
						value:1
					},
					{
						label:"堂食",
						value:2
					},
					{
						label:"外卖",
						value:3
					},
					{
						label:"积分兑换",
						value:4
					}
				],
				orderList:[
					{
						orderCode:"O202312023432423432bsdfsdfsdf",
						orderAmount:"1200",
						shopping:[
							{
								prodName:"时发生发射点撒发射点发射点发射点方式",
								prodLogo:"/static/food.jpg"
							}
						],
						orderStatus:{
							label:"已完成",
							value:1
						}
					},
					{
						orderCode:"O202312023432423432bsdfsdfsdf",
						orderAmount:"1200",
						shopping:[
							{
								prodName:"时发生发射点撒发射点发射点发射点方式",
								prodLogo:"/static/food.jpg"
							},
							{
								prodName:"手动阀手动阀士大夫士大夫",
								prodLogo:"/static/food.jpg"
							}
						],
						orderStatus:{
							label:"已完成",
							value:1
						}
					},
					{
						orderCode:"O202312023432423432bsdfsdfsdf",
						orderAmount:"1200",
						shopping:[
							{
								prodName:"时发生发射点撒发射点发射点发射点方式时发生发射点撒发射点发射点发射点方式",
								prodLogo:"/static/food.jpg"
							}
						],
						orderStatus:{
							label:"已完成",
							value:1
						}
					}
				]
			}
		},
		methods: {
			onOrderDetailButton:function(order){
				uni.navigateTo({
					url:"/pages/home/order-detail/order-detail?orderID="+order.orderCode
				})
			}
		}
	}
</script>

<style>

.order-menu { }
.order-menu-item { padding: 25rpx; text-align: center; font-size: 14px; }	
	
.order-box-item { width: 660rpx; margin: 25rpx auto; padding: 20rpx; background: #fff; border-radius: 20rpx;}

.order-box-item-header { padding: 25rpx 0; }
.order-box-item-shopping { position: relative; }
.order-box-item-shopping-list-icon { width: 100rpx; height: 100rpx; padding-right: 20rpx;}
.order-box-item-shopping-list-icon image { border-radius: 10rpx;}
.order-box-item-shopping-volume { position: absolute; top: 0; right: 0; bottom: 0; }
.order-box-item-shopping-list-text { padding: 25rpx 0; width: 420rpx; text-align: left; line-height: 15px;}

.order-box-item-button { padding: 25rpx 0;}
.order-box-item-button-item { margin: 0 15rpx; border: #ededed 1px solid; border-radius: 20rpx; padding: 15rpx 25rpx; }
</style>
